<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq</title>
</head>

<style>
*{margin:0px; padding: 0px;}
	.menu{
		height:50px;
		background: #272822;
		line-height:50px;
	}
	.menu ul{
		list-style:none;
	}
	.menu ul li{
		float: left;;
		color:#fff;
		margin-left: 15px;
		font-size:20px;
		line-height:50px;
		width:100px;
		text-align: center;
	}
	.menu ul li:hover{
		cursor: pointer; /*鼠标滑动，变成小手*/
		background: #ccc;
	}

	.info{
		
		height:200px;
		background: #ccc;
		color:#000;
		overflow: hidden; /* 超出文字隐藏 */
		padding: 15px;
	}

	.info p{
		display:none;
	}

	.info p:first-child{
		display:block;
	}
</style>
<style>
	
</style>
<script src="jquery.js"></script>

<body>

	<div class='menu'>
		<ul>
			<!-- li是块标签 -->
			<li>linux</li>
			<li>php</li>
			<li>javascript</li>
		</ul>
	</div>
	<div class='info'>
		<p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!ery much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p>
		<p>php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!</p>
		<p>javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!javacript is very much!</p>
		


	</div>
</body>
<script>
	//index索引，用于对等环境，上边ul 3个，下边p标签3个。
	$('.menu li').mouseenter(function(){
		//当前menu li 在所有的li中排第几
		idx=$(this).index('.menu li');
		//alert(idx);
		$('.info p').eq(idx).show(); //显示info中p标签对应的内容
		$('.info p').not($('.info p').eq(idx)).hide();
		//$('.info p').eq(idx) 除了当前显示的内容，将其他info中p标签内容隐藏
	});

	
</script>
</html>